<template>
	<view class="content">
		<!-- 左侧标题 -->
		<uni-segmented-control class="title" styleType="text" :values="leftTitle.tabList" :current="leftCurrent"
			:active-color="'#175DFF !important'" @clickItem="changeTypeLeft" v-if='leftTitle.type==="tab"' />
		<view class="title" v-else>{{leftTitle.title}}</view>

		<!-- 右侧标题 -->
		<uni-segmented-control class="1123" :style="{'width':rightTitle.width+'rpx'}" styleType="text"
			:values="rightTitle.tabList" :current="rightCurrent" :active-color="'#175DFF !important'"
			@clickItem="changeTypeRight" v-if='rightTitle.type==="tab"' />
		<uni-data-select v-model="rightPickerValue" :localdata="rightTitle.tabList" :clear='false' @change="changeRight"
			v-else-if='rightTitle.type==="select"'>
		</uni-data-select>
		<view class="active" v-else-if='rightTitle.type==="link"' @click="onLinkRight()">{{rightTitle.tabList[0]}}
		</view>
		<view class="active" v-else-if='rightTitle.type==="slot"'>
			<slot name="rightTitle"></slot>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const emit = defineEmits(['select', 'changeTypeLeft'])

	const props = defineProps({
		leftTitle: {
			type: Object,
			default: {
				type: 'text',
				title: '',
				tabList: [],
				tabIndex: 0
			}
		},
		rightTitle: {
			type: Object,
			default: {
				type: 'tab',
				title: '',
				tabList: [],
				tabIndex: 0,
				width: 340
			}
		}
	})
	const leftCurrent = ref(Number(props.leftTitle.tabIndex))
	const rightPickerValue = ref(props.rightTitle.tabIndex)
	const rightCurrent = ref(Number(props.rightTitle.tabIndex))
	// 左侧
	const changeTypeLeft = (event) => {
		leftCurrent.value != event.currentIndex && (leftCurrent.value = event.currentIndex)
		emit('changeTypeLeft', leftCurrent.value)
	}

	// 右侧
	const changeTypeRight = (event) => {
		rightCurrent.value != event.currentIndex && (rightCurrent.value = event.currentIndex)
		emit('select', rightCurrent.value)
	}
	const changeRight = (e) => {
		rightPickerValue.value = e
		emit('select', rightPickerValue.value)
	}
	const onLinkRight = () => {
		emit('select', rightPickerValue.value)
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 38rpx;
		padding-bottom: 32rpx;

		.title {
			color: #222222;
			font-size: 52rpx;
			font-weight: bold;
		}

		.segmented-control {
			width: 340rpx;

			::v-deep .segmented-control__text {
				font-size: 28rpx;
				color: #929394 !important;
				border-bottom-width: 6rpx
			}

			&.title {
				width: auto;

				::v-deep .segmented-control__text {
					color: #222222;
					font-size: 52rpx;
					font-weight: bold;
					margin-right: 20rpx;
				}
			}
		}

		.active {
			color: #175DFF !important;
			font-size: 28rpx;
		}
	}

	::v-deep .uni-stat__select {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex: none;
		width: 20%;
		margin-right: 25rpx;
	}

	::v-deep .uni-stat-box {
		flex: none;
	}

	::v-deep .uni-select {
		border: none;
		border-radius: none;
		border-bottom: none;

		.uni-select__selector {
			width: 150%;
			position: absolute;
			left: -56rpx;
			top: calc(100% + 3px);

			.uni-popper__arrow {
				border-bottom-color: #fff;
				right: 40%;
				left: auto;
			}
		}
	}


	// ::v-deep .uni-popper__arrow:after {
	// 	top: 1px;
	// 	margin-left: 120rpx;
	// 	border-top-width: 0;
	// 	border-bottom-color: #fff;
	// 	// border-bottom-color: red;
	// }

	::v-deep .uni-scroll-view-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	::v-deep .uni-select__input-text {
		margin-right: 10rpx;
		color: #5C646E;
		font-size: 28rpx;
	}
</style>